<template>
  <a-drawer
    v-model:open="open"
    :mask-closable="false"
    class="custom-class"
    root-class-name="root-class-name"
    width="30%"
    :title="titletype == 'add' ? '新增分类' : '编辑分类'"
    placement="right"
    @close="closebtn"
  >
    <a-form
      ref="formRef"
      :model="formState.info"
      :rules="rules"
      layout="vertical"
    >
      <a-form-item ref="title" label="名称" name="title">
        <a-input v-model:value="formState.info.title" />
      </a-form-item>
      <a-form-item ref="content" label="备注" name="content">
        <a-textarea
          v-model:value="formState.info.content"
          :rows="4"
          placeholder="请输入备注"
        />
      </a-form-item>
    </a-form>
    <template #footer>
      <div style="display: flex; justify-content: flex-end">
        <a-button style="margin-right: 8px" @click="closebtn">取消</a-button>
        <a-button type="primary" @click="infobtn">确定</a-button>
      </div>
    </template>
  </a-drawer>
</template>

<script setup lang="ts">
import { computed, reactive, ref, watch } from 'vue';

import { message } from 'ant-design-vue';

// import * as api from '../serve';

const props = defineProps({
  value: {
    type: Boolean,
    default: false,
  },
  type: {
    type: String,
    default: 'add',
  },
  editdata: {
    type: Object,
    default: () => {},
  },
});

const emits = defineEmits(['update:value', 'submit', 'close']);

const formRef = ref();
const rules = {
  title: [
    {
      required: true,
      message: '请输入名称',
      trigger: 'change',
    },
  ],
  content: [
    {
      required: true,
      message: '请输入备注',
      trigger: 'change',
    },
  ],
};

const formState = reactive({
  info: {
    title: '',
    content: '',
  },
});
watch(
  () => props.value,
  (newV) => {
    console.log('props', props.editdata);

    if (newV && props.type == 'update') {
      formState.info.title = props.editdata?.name;
      formState.info.content = props.editdata?.desc;
    } else {
      formState.info.title = '';
      formState.info.content = '';
    }
  },
  {
    immediate: true,
  },
);

const open = computed({
  get() {
    return props.value;
  },
  set(val) {
    emits('update:value', val);
  },
});

const titletype = ref();

const infobtn = () => {
  console.log('info', props.type);

  formRef.value
    .validate()
    .then(async () => {
      try {
        // if (props.type == 'add') {
        //   await api.$createuser({ ...formState.info });
        //   message.success('添加成功');
        //   open.value = false;
        //   emits('submit');
        // } else {
        //   await api.$edituser({ ...formState.info, id: props.editdata.id });
        //   message.success('编辑成功');
        //   open.value = false;
        //   emits('submit');
        // }
        // debugger
      } catch (error) {
        console.log('error', error);
      }
    })
    .catch((error: any) => {
      console.log('error', error);
    });
};

const closebtn = () => {
  open.value = false;
  formState.info = {
    title: '',
    content: '',
  };
  emits('close');
};
</script>
